<template>
  <div v-loading="isUploading" element-loading-text="上传中"
       style="width: 100%">
    <div class="artistAdd">
      <p class="title">艺人信息</p>
      <div>
        <p class="right_title" style="float: left; width: 30%;">
          <img style="width: 30px;height: 30px;margin-right: 10px" src="../../assets/logo2.png">
          <span>基本信息</span>
        </p>
      </div>
      <el-row :gutter="24" style="clear: both;">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-input">
          <el-col :span="8">
            <el-form-item label="姓名/艺名" prop="realName">
              <el-input v-model="form.realName"></el-input>
            </el-form-item>
            <el-form-item label="监护人姓名">
              <el-input v-model="form.guardian"></el-input>
            </el-form-item>
            <el-form-item label="微信号">
              <el-input v-model="form.wechatNumber"></el-input>
            </el-form-item>
            <el-form-item label="国籍">
              <el-select v-model="form.nationalityID" placeholder="请选择">
                <el-option
                  v-for="item in raceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="语言">
              <el-select v-if="isReload" v-model="form.languageID" multiple collapse-tags placeholder="请选择语言（多选）"
                         @change="reloadLanguage">
                <el-option
                  v-for="item in languageList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职业">
              <el-select v-if="isReload" v-model="form.jobID" multiple collapse-tags placeholder="请选择职业(多选)"
                         @change="reloadLanguage">
                <el-option
                  v-for="item in jobList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="身高">
              <el-input v-model="form.height">
                <template slot="append">cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="所在城市">
              <el-cascader :options="cityList" placeholder="请选择城市" :show-all-levels="false" v-model="selectOptions"
                           @change="addOption"></el-cascader>
              <div class="tags">
                <el-tag :key="tag.value" v-for="tag in cityListPlace" closable :disable-transitions="false"
                        @close="handleClose(tag.value)">
                  {{tag.name}}
                </el-tag>
              </div>
            </el-form-item>
            <el-form-item label="学校">
              <el-input v-model="form.schoolID">
              </el-input>
              <!--<el-select v-model="form.schoolID" multiple collapse-tags placeholder="请选择学校（多选）">-->
              <!--<el-option-->
              <!--v-for="item in schoolList"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
              <!--&gt;</el-option>-->
              <!--</el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker v-model="form.birthday" type="date" placeholder="请选择出生日期"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="体重">
              <el-input v-model="form.weight">
                <template slot="append">kg</template>
              </el-input>
            </el-form-item>
            <el-form-item label="标签" v-if="$route.query.userRole != 1">
              <el-cascader :options="tagList" placeholder="请选择标签" :show-all-levels="false" v-model="tagsOptions"
                           @change="addTag"></el-cascader>
              <div class="tags">
                <el-tag :key="tag.value" v-for="tag in tagsListPlace" closable :disable-transitions="false"
                        @close="handleTagClose(tag.value)">
                  {{tag.label}}
                </el-tag>
              </div>
            </el-form-item>
            <el-form-item>
              &nbsp;
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="form.professionalID"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-form :model="form" :rules="rules" label-width="80px">
        <el-form-item v-for="(domain, index) in form.fansData"
                      label="粉丝数"
                      :key="domain.key"
                      :prop="'domains.' + index + '.value'">
          <el-form-item label>
            <el-select v-model="domain.fansType" placeholder="请选择" style="width: 120px;">
              <el-option
                v-for="item in fansList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input type="number" v-model="domain.fansNumber" style="width:70px;"></el-input>&nbsp;万 &nbsp;&nbsp;地址
            <el-input v-model="domain.fansUrl" style="width:180px;"></el-input>
            <el-button v-if="index == 0" @click="addFans">新增</el-button>
            <el-button v-if="index == 0 && form.fansData.length == 1" @click="clearFans">清除</el-button>
            <el-button v-if="form.fansData.length > 1" @click.prevent="removeFans(domain)">删除</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item v-if="isShowSalary" v-for="(domain, index) in form.salaryData"
                      label="期望薪资"
                      :key="domain.key"
                      :prop="'domains.' + index + '.value'">
          <el-form-item label>
            <el-select v-model="domain.salaryType" placeholder="请选择" @change="salaryDataChange">
              <el-option
                v-for="item in salaryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-input type="number" v-model="domain.salaryPrice" placeholder="请填写期望薪资" style="width:150px;"></el-input>
            <el-button v-if="index == 0" @click="addSalary">新增</el-button>
            <el-button v-if="index == 0 && form.salaryData.length == 1" @click="clearSalary()">清除</el-button>
            <el-button v-if="form.salaryData.length > 1" @click.prevent="removeSalary(domain)">删除</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
      <p class="right_title">
        <img style="width: 30px;height: 30px;margin-right: 10px;" src="../../assets/logo2.png">
        <span>形象展示</span>
      </p>
      <el-form :model="form" :rules="rules" label-width="80px">
        <el-form-item label="封面">
          <span class="textcolor">（请添加照片，最多添加1张，目前仅支持jpg、jpeg、png格式图片上传）</span>
          <el-upload v-if="isCover"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleCoverRemove"
                     action="${pageContext.request.contextPath}/lookup/editEvidence/123"
                     list-type="picture-card"
                     :file-list="form.photoCoverList"
                     :before-upload="beforCoverImgUpload"
                     class="upload-img"
                     :limit=1

          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="个人照片">
          <span class="textcolor">（请添加照片，最多添加12张，目前仅支持jpg、jpeg、png格式图片上传）</span>
          <el-upload
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :multiple="false"
            action="${pageContext.request.contextPath}/lookup/editEvidence/123"
            list-type="picture-card"
            :file-list="form.photoList"
            :http-request="uploadFileImage"
            :limit=12

          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- <el-upload
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            multiple
            action="${pageContext.request.contextPath}/lookup/editEvidence/123"
            list-type="picture-card"
            :file-list="form.photoList"
            :http-request="uploadFileImage"
          >
            <i class="el-icon-plus"></i>
          </el-upload> -->
        </el-form-item>
        <el-form-item label="个人视频">
          <span class="textcolor">（请添加个人视频，最多添加6个，目前仅支持上传mp4格式文件）</span>
          <el-upload
            ref="upload"
            :on-remove="handleVideoRemove"
            :multiple="false"
            action="${pageContext.request.contextPath}/lookup/editEvidence/123"
            list-type="picture-card"
            :file-list="form.videoList"
            :auto-upload="true"
            :http-request="uploadFileVideo"
            :on-error="handleError"
            accept=".mp4"
            class="upload-video"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in worksList"
          :label="'作品地址'"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          :rules="{
    }"
        >
          <el-input v-model="domain.value" style="width: 200px;"></el-input>
          <el-button v-if="index == 0" @click="addDomain()">新增作品</el-button>
          <el-button v-if="index != 0" @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 100}" v-model="form.personalContent"></el-input>
        </el-form-item>
        <el-form-item label>
          <div v-if="!isUploading" class="create" @click="submit('form')">
            <span>提交/申请</span>
          </div>
        </el-form-item>
      </el-form>
      <el-dialog
        title="图片裁剪"
        :visible.sync="centerDialogVisible"
        width="90%"
        custom-class='dialog-content'
        center>
        <!--<vueCropper-->
        <!--ref="cropper"-->
        <!--:img="cropperOptions.img"-->
        <!--:autoCrop="cropperOptions.autoCrop"-->
        <!--:autoCropWidth="cropperOptions.autoCropWidth"-->
        <!--:autoCropHeight="cropperOptions.autoCropHeight"-->
        <!--:canScale="false"-->
        <!--:outputSize="1"-->
        <!--:fixed="true"-->
        <!--:fixedNumber="[3,4]"-->
        <!--:fixedBox="false"-->
        <!--:full="false"-->
        <!--:canMove="true"-->
        <!--:canMoveBox="true"-->
        <!--:centerBox="true"-->
        <!--:original="false"-->
        <!--&gt;</vueCropper>-->
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :fixedBox="option.fixedBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :centerBox="option.centerBox"
          :high="option.high"
          :infoTrue="option.infoTrue"
          :canScale="false"
          :fixed="true"
          :fixedNumber="[3,4]"
          @realTime="realTime"
          @cropMoving="cropMoving"
          :enlarge="option.enlarge"
          :mode="option.mode"
        ></vueCropper>
        <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFileImageCropper">确 定</el-button>
      </span>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisible">
        <img class="img-dialog" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {VueCropper} from 'vue-cropper';
  import {baseUrl} from "../../index";
  import $ from 'jquery'

  export default {
    data() {
      return {
        option: {
          img: "",
          size: 1,
          full: false,
          outputType: "png",
          canMove: true,
          fixedBox: false,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 300,
          autoCropHeight: 400,
          centerBox: false,
          high: true,
          cropData: {},
          enlarge: 1,
          mode: 'contain'
        },
        isUploading: false,
        centerDialogVisible: false,
        form: {
          uid: "",
          realName: "", //姓名
          sex: "", //性别 1男 0 女
          birthday: "", //出生年月
          phone: "", //手机号码
          height: "", //身高
          weight: "", //体重
          nationalityID: "", //国籍
          cityID: "", //所属城市ID集合
          languageID: "", //语言ID集合
          schoolID: "", //学校ID集合
          professionalID: "", //专业ID集合
          jobID: "", //职业ID集合
          photoID: "", //照片ID集合
          videoID: "", //视频ID集合
          typeID: "",
          worksUrl: "", //作品ID集合
          salaryPrice: "", //薪资金额
          salaryType: "", //薪资类型
          personalContent: "", //个人简介
          guardian: "", //监护人姓名
          wechatNumber: "", //微信号
          fansData: [{
            fansType: '',
            fansNumber: '',
            fansUrl: ''
          }],
          salaryData: [{
            salaryType: '',
            salaryPrice: ''
          }],
          fansList: [],
          photoCoverList: [],
          photoList: [],
          videoList: [],
          cover: ""
        },
        worksList: [{
          value: ''
        }],
        isCover: true,
        // 城市
        cityList: [],
        tagList: [],
        tagsListPlace: [],
        tagsOptions: [],
        options: [],
        cityListPlace: [],
        selectOptions: [],
        // 职业
        jobList: [],
        // 学校
        schoolList: [],
        // 粉丝
        fansList: [],
        // 国籍
        raceList: [],
        // 语言
        languageList: [],
        // 专业
        professionalList: [],
        // 性别
        sexList: [
          {
            label: "男",
            value: "1"
          },
          {
            label: "女",
            value: "2"
          }
        ],
        // 薪资类型
        salaryList: [
          {
            label: "元/小时",
            value: "1"
          },
          {
            label: "元/件",
            value: "2"
          },
          {
            label: "元/天",
            value: "3"
          }
        ],
        // 设置红点
        rules: {
          realName: [{required: true, message: "请输入姓名", trigger: "blur"}],
          sex: [{required: true, message: "请选择性别", trigger: "change"}],
          birthday: [{required: true, message: "请选择出生日期", trigger: "change"}],
          phone: [{required: true, message: "请输入手机号", trigger: "blur"}],
          height: [{required: true, message: "请输入身高", trigger: "blur"}],
          weight: [{required: true, message: "请输入体重", trigger: "blur"}],
          jobID: [{required: true, message: "请选择职业", trigger: "change"}],
          languageID: [{required: true, message: "请选择语言", trigger: "change"}],
        },
        radio: "1",
        dialogImageUrl: "",
        dialogVisible: false,
        isShowSalary: true,
        formDate: "",
        isReload: true,
      };
    },
    mounted() {
      // 获取属性
      if (this.$route.query.type == 'add') {
        this.getCity();
      } else {
        this.form = JSON.parse(sessionStorage.siteInfo);
        console.log(this.form);
        this.getCity();
        this.worksList = [];
        for (let i in this.form.worksUrl) {
          this.worksList.push({'value': this.form.worksUrl[i]});
        }
        console.log('*&^*^&&*^*&');
        console.log(this.worksList);
        this.form.typeID = this.form.typeId;
        // if (this.form.salaryType == 0) {
        //   this.form.salaryType = "";
        // }
        if (this.form.nationalityID == 0) {
          this.form.nationalityID = "";
        }
        if (this.worksList.length == 0) {
          this.worksList.push({'value': ''});
        }
        this.form.photoCoverList = [];
        console.log(this.form.cover);
        if (this.form.cover == undefined) {
          this.form.cover = "";
        }
        if (this.form.cover.length > 0) {
          this.form.photoCoverList.push({name: this.form.cover, url: this.form.cover});
        }
        if (this.form.photoList == undefined) {
          this.form.photoList = [];
        }
        for (let i = 0; i < this.form.photoList.length; i++) {
          this.form.photoList[i].name = this.form.photoList[i].fileUrl;
          this.form.photoList[i].url = this.form.photoList[i].fileUrl;
        }
        if (this.form.videoList == undefined) {
          this.form.videoList = [];
        }
        for (let i = 0; i < this.form.videoList.length; i++) {
          this.form.videoList[i].name = this.form.videoList[i].fileUrl;
          this.form.videoList[i].url = this.form.videoList[i].fileUrl;
        }

        if (this.form.fansData == undefined) {
          this.form.fansData = [];
          this.form.fansData.push({
            fansType: '',
            fansNumber: '',
            fansUrl: ''
          })
        }
        if (this.form.fansData.length == 0) {
          this.form.fansData = [];
          this.form.fansData.push({
            fansType: '',
            fansNumber: '',
            fansUrl: ''
          });
        }

        this.form.salaryData = this.form.salaryList;
        if (this.form.salaryData == undefined) {
          this.form.salaryData = [];
          this.form.salaryData.push({
            salaryPrice: '',
            salaryType: ''
          })
        }
        if (this.form.salaryData.length == 0 || this.form.salaryData == undefined) {
          this.form.salaryData = [];
          this.form.salaryData.push({
            salaryPrice: '',
            salaryType: ''
          })
        }
        console.log('^&^&^&^&^&&^&^&^&');
        console.log(this.form.fansData);
        console.log(this.form.salaryData);
      }
    },
    methods: {
      // beforeImgUpload(file){
      //   this.isCover = false;
      //   this.handleImg(file);
      // },
      reloadLanguage() {
        this.isReload = false;
        this.isReload = true;
      },
      salaryDataChange() {
        this.isShowSalary = false;
        this.isShowSalary = true;
      },
      beforCoverImgUpload(file) {
        // this.isCover = true;
        this.handleImg(file);
      },
      handleImg(file) {
        console.log(file);
        this.centerDialogVisible = true;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        this.uploadImgName = file.name;
        this.uploadImgUid = file.uid;
        reader.onload = (readerEvent) => {
          const myImage = new Image();
          myImage.src = readerEvent.target.result;
          myImage.onload = () => {
            this.option.img = readerEvent.target.result;
          };
        };
      },

      // 提交/
      submit(formName) {
        this.$refs[formName].validate(async (valid) => {
          console.log(valid)
          if (valid) {
            let self = this;
            let arr = [];
            let worksUrlParam = '';
            for (let i = 0; i < self.worksList.length; i++) {
              if (i < (self.worksList.length - 1)) {
                worksUrlParam += (self.worksList[i].value + ',');
              } else {
                worksUrlParam += self.worksList[i].value;
              }
            }
            console.log(worksUrlParam);

            for (let i = 0; i < self.cityListPlace.length; i++) {
              if (i < (self.cityListPlace.length - 1)) {
                this.form.cityID += self.cityListPlace[i].value + ',';
              } else {
                this.form.cityID += self.cityListPlace[i].value;
              }
            }


            self.form.typeID = "";
            for (let i = 0; i < self.tagsListPlace.length; i++) {
              if (i < (self.tagsListPlace.length - 1)) {
                this.form.typeID += self.tagsListPlace[i].value + ',';
              } else {
                this.form.typeID += '' + self.tagsListPlace[i].value;
              }
            }

            this.form.photoID = "";
            for (let i = 0; i < self.form.photoList.length; i++) {
              if (i < (self.form.photoList.length - 1)) {
                this.form.photoID += self.form.photoList[i].fileId + ',';
              } else {
                this.form.photoID += self.form.photoList[i].fileId;
              }
            }

            if (self.form.videoList == undefined) {
              self.form.videoList = [];
            }
            self.form.videoID = "";
            for (let i = 0; i < self.form.videoList.length; i++) {
              if (i < (self.form.videoList.length - 1)) {
                this.form.videoID += self.form.videoList[i].fileId + ',';
              } else {
                this.form.videoID += self.form.videoList[i].fileId;
              }
            }

            if (self.form.photoCoverList.length > 0) {
              self.form.cover = self.form.photoCoverList[0].name;
            } else {
              self.form.cover = "";
            }

            let obj = {
              token: self.globalData.token,
              realName: self.form.realName, //姓名
              sex: self.form.sex, //性别 1男 2 女
              birthday: self.form.birthday, //出生年月
              phone: self.form.phone, //手机号码
              height: self.form.height, //身高
              weight: self.form.weight, //体重
              nationalityID: self.form.nationalityID, //国籍
              cityID: self.form.cityID, // 城市ID
              languageID: self.form.languageID, //语言ID集合
              schoolID: self.form.schoolID, //学校ID集合
              professionalID: self.form.professionalID, //专业ID集合
              jobID: self.form.jobID, //职业ID集合
              photoID: self.form.photoID, //照片ID集合
              videoID: self.form.videoID, //视频ID集合
              worksUrl: worksUrlParam, //作品ID集合
              salaryData: self.form.salaryData, //薪资金额
              fansData: self.form.fansData,
              personalContent: self.form.personalContent, //个人简介
              guardian: self.form.guardian,
              typeID: self.form.typeID,
              wechatNumber: self.form.wechatNumber,
              cover: self.form.cover
            };
            console.log(obj);

            // return;
            let languageId = "";
            console.log('**************')
            console.log(self.form.languageID);
            if (self.form.languageID == undefined) {
              self.form.languageID = '';
            }
            for (let i = 0; i < self.form.languageID.length; i++) {
              if (i < (self.form.languageID.length - 1)) {
                languageId += (self.form.languageID[i] + ',');
              } else {
                languageId += self.form.languageID[i];
              }
            }
            obj.languageID = languageId;

            let jobID = "";
            if (self.form.jobID == undefined) {
              self.form.jobID = '';
            }
            for (let i = 0; i < self.form.jobID.length; i++) {
              if (i < (self.form.jobID.length - 1)) {
                jobID += (self.form.jobID[i] + ',');
              } else {
                jobID += self.form.jobID[i];
              }
            }
            obj.jobID = jobID;

            if (this.$route.query.type == "modify") {
              obj.uid = this.form.uid;
            }
            // self.$post("/Category/createUserActor", { Custom: obj }).then(res => {
            //   if (res.code == "200") {
            //     console.log(res);
            //   } else {
            //   }
            // });
            // this.$post("/Category/createUserActor", obj).then(res => {
            //   if (res.code == '200') {
            //     this.$message({
            //       message: '新增艺人成功',
            //       type: 'success'
            //     });
            //     this.$router.push('/artistManagement');
            //   } else {
            //     this.$message.error(res.message);
            //   }
            // });
            $.ajax({
              type: "post",
              url: baseUrl + "/Category/createUserActor",
              data: JSON.stringify(obj),
              dataType: "json",
              contentType: "application/json",
              success: function (callbackdata) {
                if (callbackdata.code == '200') {
                  if (self.$route.query.type == 'add') {
                    self.$message({
                      message: '新增艺人成功',
                      type: 'success'
                    });
                  } else {
                    self.$message({
                      message: '修改艺人成功',
                      type: 'success'
                    });
                  }
                  // if (self.$route.query.userRole == 1) {
                  self.$router.go(-1)
                  // } else {
                  //   self.$router.push('/artistManagement');
                  // }

                } else {
                  self.$message.error(callbackdata.message);
                }
              }
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '请检查输入是否正确',
              offset: 100
            });
            return false;
          }
        });
      },
      addDomain() {
        this.worksList.push({
          value: '',
          key: Date.now()
        });
      },
      removeDomain(item) {
        var index = this.worksList.indexOf(item)
        if (index !== -1) {
          this.worksList.splice(index, 1)
        }
      },
      addFans() {
        this.form.fansData.push({
          fansType: '',
          fansNumber: '',
          fansUrl: ''
        });
      },
      clearFans () {
        this.form.fansData[0].fansType = '';
        this.form.fansData[0].fansNumber = '';
        this.form.fansData[0].fansUrl = '';
      },
      removeFans(item) {
        var index = this.form.fansData.indexOf(item)
        if (index !== -1) {
          this.form.fansData.splice(index, 1)
        }
      },
      addSalary() {
        this.form.salaryData.push({
          salaryPrice: '',
          salaryType: '',
        });
        console.log(this.form.salaryData);
        this.isShowSalary = false;
        this.isShowSalary = true;
      },
      clearSalary() {
        this.form.salaryData[0].salaryType = '';
        this.form.salaryData[0].salaryPrice = '';
      },
      removeSalary(item) {
        var index = this.form.salaryData.indexOf(item)
        if (index !== -1) {
          this.form.salaryData.splice(index, 1);
        }
        this.isShowSalary = false;
        this.isShowSalary = true;
      },
      addOption(value) {
        this.selectOptions = [];
        this.cityListPlace.push(this.getCascaderObj(value, this.cityList)[1]);
      },
      handleClose(value, index) {
        for (let i = 0; i < this.cityListPlace.length; i++) {
          let dic = this.cityListPlace[i];
          console.log(value);
          console.log(dic);
          if (value == dic.value) {
            this.cityListPlace.splice(i, 1);
            return;
          }
        }
      },
      addTag(value) {
        console.log(value);
        if (value.length == 1) {
          return;
        }
        this.tagsOptions = [];
        this.tagsListPlace.push(this.getCascaderObj(value, this.tagList)[1]);
      },
      handleTagClose(value, index) {
        for (let i = 0; i < this.tagsListPlace.length; i++) {
          let dic = this.tagsListPlace[i];
          console.log(value);
          console.log(dic);
          if (value == dic.value) {
            this.tagsListPlace.splice(i, 1);
            break;
          }
        }
        console.log(this.tagsListPlace);
      },
      getCascaderObj(val, opt){
        return val.map(function (value, index, array) {
          for (var itm of opt) {
            if (itm.value == value) {
              opt = itm.children;
              return itm;
            }
          }
          return null;
        });
      },
      // 获取城市列表
      getCity() {
        let self = this;
        self.$fetch("/Category/getCity", {}).then(res => {
          console.log(res.code);
          if (res.code == "200") {
            // res.data.forEach(element => {
            //   element.value = element.cityID;
            //   element.label = element.name;
            // });
            console.log('###########');

            for (let i = 0; i < res.data.cityList.length; i++) {
              let province = res.data.cityList[i];
              province.value = province.id;
              province.label = province.name;
              for (let j = 0; j < province.cityList.length; j++) {
                let city = province.cityList[j];
                city.value = city.id;
                city.label = city.name;
                if (this.$route.query.type == 'modify') {
                  if (this.form.cityID == undefined) {
                    this.form.cityID = '';
                  }
                  let arr = this.form.cityID.split(',');
                  for (let k = 0; k < arr.length; k++) {
                    if (city.value == arr[k]) {
                      this.cityListPlace.push(city);
                    }
                  }
                }
              }
              province.children = province.cityList;
            }
            this.form.cityID = "";
            self.cityList = res.data.cityList;
          }
        });
        // 职业
        self.$fetch("/Category/getCategory", {gid: '1'}).then(res => {
          if (res.code == "200") {
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.jobList = res.data.Classification;
            if (this.$route.query.type == 'modify') {
              if (self.form.jobID == undefined) {
                self.form.jobID = '';
              }
              if (self.form.jobID.length > 0) {
                let jobId = self.form.jobID.split(',');
                this.form.jobID = jobId;
              } else {
                this.form.jobID = [];
              }
            }
          }
        });
        // 国籍
        self.$fetch("/Category/getCategory", {gid: '3'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.raceList = res.data.Classification;
          }
        });
        // 语言
        self.$fetch("/Category/getCategory", {gid: '4'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.languageList = res.data.Classification;
            if (this.$route.query.type == 'modify') {
              if (self.form.languageID == undefined) {
                self.form.languageID = '';
              }
              if (self.form.languageID.length > 0) {
                let languageId = self.form.languageID.split(',');
                this.form.languageID = languageId;
              } else {
                this.form.languageID = [];
              }
              console.log('****************');
              console.log('****************');
              console.log(self.form.languageID);
            }
          }
        });
        // 学校
        self.$fetch("/Category/getCategory", {gid: '5'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.salaryList = res.data.Classification;
          }
        });
        // 专业
        self.$fetch("/Category/getCategory", {gid: '6'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.professionalList = res.data.Classification;
          }
        });
        // 粉丝类型
        self.$fetch("/Category/getCategory", {gid: '7'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.fansList = res.data.Classification;
          }
        });
        console.log('******' + this.form.typeID);
        self.$fetch("/User/getActorCate", {token: this.globalData.token}).then(res => {
          if (res.code == "200") {
            console.log(res);
            for (let i = 0; i < res.data.Classification.length; i++) {
              let province = res.data.Classification[i];
              province.value = province.classificationID;
              province.label = province.classificationName;
              if (province.Classification != undefined) {
                for (let j = 0; j < province.Classification.length; j++) {
                  let city = province.Classification[j];
                  city.value = city.classificationID;
                  city.label = city.classificationName;
                  if (this.$route.query.type == 'modify') {
                    if (this.form.typeId == undefined) {
                      this.form.typeId = '';
                    }
                    let arr = this.form.typeId.split(',');
                    for (let k = 0; k < arr.length; k++) {
                      if (city.value == arr[k]) {
                        this.tagsListPlace.push(city);
                      }
                    }
                  }
                }
                province.children = province.Classification;
              }

            }
            self.tagList = res.data.Classification;
            console.log(self.tagsListPlace)
          }
        });
      },
      changeFileVideo(file) {
        let self = this;
        console.log(file);
        var formDate = new FormData();
        formDate.append("file_video", file);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };

        self.$upload("/File/uploadsVideo", formDate, config).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      changeFileImage(file) {
        let self = this;
        console.log(file.file);
        var formDate = new FormData();
        formDate.append("file_image", file.file, file.filename);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        self.$upload("/File/uploadsImage", formDate, config).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      uploadFileImageCropper(){
        this.centerDialogVisible = false;
        this.$refs.cropper.getCropData((data) => {
          let uploadName = (new Date().getTime()) + '-' + this.uploadImgName;
          let file = this.dataURLtoFile(data, uploadName);
          file.uid = this.uploadImgUid;
          console.log(file.length);
          // if (this.isCover == true) {
          this.uploadFileImageCover(file);
          // }
          // else {
          //   this.uploadFileImage(file);
          // }
        });
      },
      dataURLtoFile(dataurl, filename) {//将base64转换为文件
        let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type: mime});
      },
      uploadFileImage(file) {
        let self = this;
        self.isUploading = true;
        var formDate = new FormData();
        formDate.append("file_image", file.file);
        console.log(file);
        console.log(file.file);
        self.$upload("/File/uploadsImage", formDate).then(res => {
          if (res.code == "200") {
            console.log(res);
            this.form.photoList.push({name: res.data.fileUrl, url: res.data.fileUrl, fileId: res.data.fileId});
            console.log('*&*&*&&*');
            console.log(this.form.photoList);
          } else {
          }
          self.isUploading = false;
        });
      },
      uploadFileImageCover(file) {
        let self = this;
        self.isUploading = true;
        var formDate = new FormData();
        formDate.append("file_image", file);
        console.log(file);
        self.$upload("/File/uploadsImage", formDate).then(res => {
          if (res.code == "200") {
            console.log(res);
            self.form.photoCoverList = [];
            self.form.photoCoverList.push({name: res.data.fileUrl, url: res.data.fileUrl, fileId: res.data.fileId});
            self.isCover = false;
            self.isCover = true;
            console.log('$#$#$$#$#$#');
            console.log(self.form.photoCoverList);
          } else {
          }
          self.isUploading = false;
        });
      },
      uploadFileVideo(file) {
        let extension = file.file.name.substring(file.file.name.lastIndexOf('.') + 1);
        if (extension !== 'mp4') {
          this.$message.error('只能上传mp4格式的视频文件');
          return;
        }
        let self = this;
        self.isUploading = true;
        var formDate = new FormData();
        formDate.append("file_video", file.file);
        self.$upload("/File/uploadsVideo", formDate).then(res => {
          self.isUploading = false;
          if (res.code == "200") {
            if (this.form.videoList == undefined) {
              this.form.videoList = [];
            }
            this.form.videoList.push({name: res.data.fileUrl, url: res.data.fileUrl, fileId: res.data.fileId});
            // if (this.form.videoID.length == 0) {
            //   this.form.videoID += res.data.fileId;
            // } else {
            //   this.form.videoID += ',' + res.data.fileId;
            // }
          } else {
            this.$message.error(res.message);
            console.log(this.$refs);
            self.onError(file);
          }
        });
      },
      onError(file) {
        console.log(file);
      },
      uploadImage() {
        console.log("1");

        this.$refs.upload.submit();
        this.formDate.append("file_image", "12133");
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        let self = this;
        self.$upload("/File/uploadsImage", self.formDate, config).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      uploadVideo() {
        let formDate = new FormData();
        let self = this;
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        formDate.append("file_video", file);
        self.$upload("/File/uploadsVideo", self.formDate).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      // uploadImage() {
      //   let self = this;
      //   let obj = {
      //     token: sessionStorage.getItem("token"),
      //     file_image: ""
      //   };
      //   self.$post("/File/uploadsImage", obj).then(res => {
      //     if (res.code == "200") {
      //     } else {
      //     }
      //   });
      // },
      // uploadVideo() {
      //   let self = this;
      //   let obj = {
      //     token: sessionStorage.getItem("token"),
      //     file_video: ""
      //   };
      //   self.$post("/uploadsVideo", obj).then(res => {
      //     if (res.code == "200") {
      //     } else {
      //     }
      //   });
      // },
      onSubmit() {
        console.log("submit!");
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
        let arr = [];
        console.log('*******');
        console.log(fileList);
        console.log('#######')
        console.log(this.form.photoList);
        for (let i = 0; i < fileList.length; i++) {
          for (let j = 0; j < this.form.photoList.length; j++) {
            if (fileList[i].fileId == this.form.photoList[j].fileId) {
              arr.push(this.form.photoList[j]);
            }
          }
        }
        this.form.photoList = arr;
        console.log(this.form.photoList);
      },
      handleCoverRemove(file, fileList){
        this.form.photoCoverList = [];
      },
      handleVideoRemove(file, fileList) {
        console.log(file, fileList);
        let arr = [];
        for (let i = 0; i < fileList.length; i++) {
          for (let j = 0; j < this.form.videoList.length; j++) {
            if (fileList[i].fileId == this.form.videoList[j].fileId) {
              arr.push(this.form.videoList[j]);
            }
          }
        }
        this.form.videoList = arr;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }

    },
    components: {
      VueCropper,
    },
  }
</script>

<style lang="less" scoped>
  /*.el-form-item {*/
  /*margin-bottom: 0px !important;*/
  /*}*/
  .textcolor {
    color: red;
    font-size: 9px;
  }

  /*.el-upload-list--picture-card .el-upload-list__item {*/
  /*width: 70px;*/
  /*height: 70px;*/
  /*line-height: 70px;*/
  /*}*/

  .create {
    margin-top: 20px;
    margin-bottom: 60px;
    width: 150px;
    height: 30px;
    border-radius: 4px;
    background-color: #b3302e;
    line-height: 30px;
    text-align: center;
    color: white;
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  .form-input {
    .el-form-item {
      margin-top: 20px;
    }
  }

  .artistAdd {
    width: 80%;
    margin: auto;
  }

  .artistAdd /deep/ .dialog-content {
    .el-dialog__body {
      padding: 10px;
      height: 600px;
    }
  }

  .artistAdd /deep/ .upload-img {
    .el-upload--picture-card, .el-upload-list__item {
      width: 120px;
      height: 160px;
      line-height: 160px;
    }
  }

  .artistAdd /deep/ .upload-video {
    .el-upload--picture-card, .el-upload-list__item {
      width: 120px;
      height: 120px;
      line-height: 120px;
    }
  }

  .img-dialog {
    max-width: 100%;
    display: block;
    margin: 0px auto;
  }

  .right_title {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }

</style>
